<script setup>
import { ref, reactive, onMounted } from 'vue'
import { test } from '../http/travel'
import {
  Delete,
  Edit,
  Search,
  Plus
} from '@element-plus/icons-vue'

const multipleTableRef = ref('')
const multipleSelection = ref('')
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})
const input2 = ref('')
const num = ref(1)
const handleChange = (value) => {
  console.log(value)
}
const options = [
  {
    value: '1',
    label: '景点列表',
    children: [
      {
        value: '2',
        label: '线路列表',
        children: [
          {
            value: '1',
            label: '1'
          },
          {
            value: '2',
            label: '2'
          }]
      }
    ]
  }
]
const onSubmit = () => {
  console.log('submit!')
}
const tableData = [
  {
    routeId: '1',
    day: '2',
    scheduleType: 'test',
    startTime: '2020-09-09',
    endTime: '2021-09-09',
    desc: 'test',
    spendTime: '50',
    createTime: '2022-09-09'
  }, {
    routeId: '1',
    day: '2',
    scheduleType: 'test',
    startTime: '2020-09-09',
    endTime: '2021-09-09',
    desc: 'test',
    spendTime: '50',
    createTime: '2022-09-09'
  }, {
    routeId: '1',
    day: '2',
    scheduleType: 'test',
    startTime: '2020-09-09',
    endTime: '2021-09-09',
    desc: 'test',
    spendTime: '50',
    createTime: '2022-09-09'
  }
]
onMounted(() => {
  test()
})
</script>

<template>
  <el-tab-pane class="test">
    <template #label>
      <span class="tab-item">行程管理</span>
    </template>
    <div class="content-container">
      <div class="table-container">
        <el-button-group class="btns">
          <el-button type="success" :icon="Plus">添加</el-button>
          <el-button type="primary" :icon="Edit" disabled>编辑</el-button>
          <el-button type="danger" :icon="Delete" disabled>删除</el-button>
        </el-button-group>
        <div class="searchBox">
          <el-input
            v-model="input2"
            class="w-50 m-2"
            placeholder="以任意内容检索"
            :suffix-icon="Search"
            width="200"
          />
        </div>
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"/>
          <el-table-column label="路线id" property="routeId"/>
          <el-table-column property="day" label="第几天"/>
          <el-table-column property="scheduleType" label="行程类型" sortable/>
          <el-table-column property="startTime" label="开始时间" sortable/>
          <el-table-column property="endTime" label="结束时间" sortable/>
          <el-table-column property="desc" label="行程描述"/>
          <el-table-column property="spendTime" label="花费时间" sortable/>
          <el-table-column property="spendTime" label="创建时间" sortable/>
        </el-table>
        <div class="pagination">
          <el-pagination background layout="prev, pager, next" :total="1000" />
        </div>
      </div>
      <div class="insert-modal">
        <el-form :model="form" label-width="120px">
          <el-form-item label="路线选择">
            <el-cascader placeholder="选择路线" :options="options" clearable />
          </el-form-item>
          <el-form-item label="第几天">
            <el-input-number v-model="num" :min="1" :max="100" @change="handleChange" />
          </el-form-item>
          <el-form-item label="起止时间">
            <el-col :span="3">
              <el-date-picker
                v-model="form.date1"
                type="datetime"
                placeholder="开始时间"
              />
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="3">
              <el-time-picker
                v-model="form.date2"
                placeholder="截止时间"
              />
            </el-col>
          </el-form-item>
          <el-form-item label="花费时间">
            <el-input-number v-model="num" :min="1" :max="100" @change="handleChange" />
          </el-form-item>
          <el-form-item label="行程类型">
            <el-select v-model="form.region" placeholder="选择行程类型">
              <el-option label="住宿" value="1" />
              <el-option label="酒店" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="行程详情">
            <el-input v-model="form.desc" type="textarea" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
  </el-tab-pane>
</template>

<style scoped>
.content-container{
  text-align: left;
  margin-left: 20px;
}
.btns {
  margin: 0px 0 10px 13px;
  vertical-align: top !important;
}

.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: right;
}

.searchBox {
  display: inline-block;
  margin-left: 10px;
}
</style>
